<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>我的采购单</span>
      </div>
    </template>
    <div>
      <el-table :data="purchaseListData" style="width: 100%">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="id" label="采购单id"/>
        <el-table-column prop="assigneeId" label="采购人id"/>
        <el-table-column prop="assigneeName" label="采购人名"/>
        <el-table-column prop="phone" label="联系方式"/>
        <el-table-column prop="priority" label="优先级"/>
        <el-table-column label="状态">
          <template #default="scope">
          <span v-if="scope.row.status==0">
            <el-text type="success">新建</el-text>
          </span>
            <span v-else-if="scope.row.status==1">
            <el-text>已分配</el-text>
          </span>
            <span v-else-if="scope.row.status==2">
            <el-text>已领取</el-text>
          </span>
            <span v-else-if="scope.row.status==3">
            <el-text>已完成</el-text>
          </span>
            <span v-else-if="scope.row.status==4">
            <el-text>有异常</el-text>
          </span>
          </template>
        </el-table-column>
        <el-table-column prop="wareId" label="仓库id"/>
        <el-table-column prop="amount" label="总金额"/>
        <el-table-column prop="createTime" label="创建日期"/>
        <el-table-column prop="updateTime" label="更新日期"/>
        <el-table-column label="操作">
          <template #default="scope">
            <el-text @click="openModify(scope.row.id)">修改</el-text>
            <el-divider direction="vertical"/>
            <el-text @click="goToFinish(scope.row.id);" type="primary" v-if="scope.row.status===2">去完成</el-text>
            <el-divider direction="vertical"/>
            <el-text>删除</el-text>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
  <div>
    <el-dialog
        v-model="detailDialogVisible"
        title="采购单项详情"
        width="60%"
        :before-close="handleClose"
    >
      <div>
        <el-table :data="purchaseDetailListData" style="width: 100%"
                  @selection-change="detailSelectionChange">
          <el-table-column type="selection" width="55"/>
          <el-table-column prop="id" label="编号"/>
          <el-table-column prop="purchaseId" label="采购单id"/>
          <el-table-column prop="skuId" label="采购商品id"/>
          <el-table-column prop="skuNum" label="采购数量"/>
          <el-table-column prop="skuPrice" label="采购金额"/>
          <el-table-column prop="wareId" label="仓库id"/>
          <el-table-column label="状态">
            <template #default="scope">
              <span v-if="scope.row.status==2">
                <el-tag>正在采购</el-tag>
              </span>
              <span v-if="scope.row.status==3">
                <el-tag>已完成</el-tag>
              </span>
              <span v-else-if="scope.row.status==4">
                <el-tag>采购失败</el-tag>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="备注">
            <template #default="scope">
              <el-input placeholder="请输入失败的原因" v-model="scope.row.reason"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="detailDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="finishSubmit">
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>
    <el-dialog
        v-model="modifyDialog"
        title="修改"
        width="60%"
    >
      <div>
        <el-form>
          <el-form-item label="编号">
            <el-input v-model="modifyPurchase.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="编号">
            <el-input v-model="modifyPurchase.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="编号">
            <el-input v-model="modifyPurchase.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="编号">
            <el-input v-model="modifyPurchase.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="编号">
            <el-input v-model="modifyPurchase.id" disabled></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="modifyDialog = false">取消</el-button>
        <el-button type="primary" @click="finishSubmit">
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {
  getMyPurchaseList,
  getPurchaseDetailListByPurchaseId,
  finishPurchase,
  getPurchaseById
} from "@/api/home/warehouse/purchase";
import {onMounted, ref, reactive} from "vue";

let purchaseListData = ref([])
let modifyDialog = ref(false)
let multipleSelection = ref([])
let purchaseDetailListData = ref([])
let detailDialogVisible = ref(false)
let showPurchase = reactive({
  id: ''
})
let modifyPurchase = ref()

function getPurchaseListData() {
  getMyPurchaseList().then(res => {
    purchaseListData.value = res.data
  })
}

function detailSelectionChange(val) {
  multipleSelection.value = val
}

/*查看这个采购单下的采购项完成情况*/
function goToFinish(purchaseId) {
  showPurchase.id = purchaseId
  getPurchaseDetailListByPurchaseId(showPurchase.id).then(res => {
    purchaseDetailListData.value = res.data
  })
  detailDialogVisible.value = true
}

function finishSubmit() {
  let dto = {
    purchaseId: showPurchase.id,
    purchaseDetails: []
  }
  /*选中的（已完成）数据*/
  purchaseDetailListData.value.forEach(item => {
    let purchaseDetail = {
      purchaseDetailId: item.id,
      status: 4,
      reason: item.reason
    }
    multipleSelection.value.forEach(selectInfo => {
      if (selectInfo.id == item.id) {
        // 如果存在则是已完成
        purchaseDetail.status = 3
      }
    })
    dto.purchaseDetails.push(purchaseDetail)
  })
  /*发送请求*/
  finishPurchase(dto)
  detailDialogVisible.value = false
}

function openModify(purchseId) {
  getPurchaseById(purchseId).then(res => {
    modifyPurchase.value = res.data
  }).finally(() => {
    modifyDialog.value = true
  })
}

onMounted(() => {
  getPurchaseListData()
})
</script>
<style scoped>

</style>
